<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>参考文章：https://developer.aliyun.com/article/904296</title>
  </head>
  <style>
    .flex {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
    .box {
      width: 150px;
      height: 150px;
      margin-bottom: 20px;
      margin-right: 20px;
      border-radius: 50%;
      border: 12px solid #000;
    }
    .box1 {
      background-color: silver;
      background-image: linear-gradient(335deg, #b00 23px, transparent 23px),
        linear-gradient(155deg, #d00 23px, transparent 23px),
        linear-gradient(335deg, #b00 23px, transparent 23px),
        linear-gradient(155deg, #d00 23px, transparent 23px);
      background-size: 58px 58px;
      background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
    }
    .box2 {
      background-color: hsl(2, 57%, 40%);
      background-image: repeating-linear-gradient(
          transparent,
          transparent 50px,
          rgba(0, 0, 0, 0.4) 50px,
          rgba(0, 0, 0, 0.4) 53px,
          transparent 53px,
          transparent 63px,
          rgba(0, 0, 0, 0.4) 63px,
          rgba(0, 0, 0, 0.4) 66px,
          transparent 66px,
          transparent 116px,
          rgba(0, 0, 0, 0.5) 116px,
          rgba(0, 0, 0, 0.5) 166px,
          rgba(255, 255, 255, 0.2) 166px,
          rgba(255, 255, 255, 0.2) 169px,
          rgba(0, 0, 0, 0.5) 169px,
          rgba(0, 0, 0, 0.5) 179px,
          rgba(255, 255, 255, 0.2) 179px,
          rgba(255, 255, 255, 0.2) 182px,
          rgba(0, 0, 0, 0.5) 182px,
          rgba(0, 0, 0, 0.5) 232px,
          transparent 232px
        ),
        repeating-linear-gradient(
          270deg,
          transparent,
          transparent 50px,
          rgba(0, 0, 0, 0.4) 50px,
          rgba(0, 0, 0, 0.4) 53px,
          transparent 53px,
          transparent 63px,
          rgba(0, 0, 0, 0.4) 63px,
          rgba(0, 0, 0, 0.4) 66px,
          transparent 66px,
          transparent 116px,
          rgba(0, 0, 0, 0.5) 116px,
          rgba(0, 0, 0, 0.5) 166px,
          rgba(255, 255, 255, 0.2) 166px,
          rgba(255, 255, 255, 0.2) 169px,
          rgba(0, 0, 0, 0.5) 169px,
          rgba(0, 0, 0, 0.5) 179px,
          rgba(255, 255, 255, 0.2) 179px,
          rgba(255, 255, 255, 0.2) 182px,
          rgba(0, 0, 0, 0.5) 182px,
          rgba(0, 0, 0, 0.5) 232px,
          transparent 232px
        ),
        repeating-linear-gradient(
          125deg,
          transparent,
          transparent 2px,
          rgba(0, 0, 0, 0.2) 2px,
          rgba(0, 0, 0, 0.2) 3px,
          transparent 3px,
          transparent 5px,
          rgba(0, 0, 0, 0.2) 5px
        );
    }
    .box3 {
      background-color: white;
      background-image: radial-gradient(midnightblue 9px, transparent 10px),
        repeating-radial-gradient(
          midnightblue 0,
          midnightblue 4px,
          transparent 5px,
          transparent 20px,
          midnightblue 21px,
          midnightblue 25px,
          transparent 26px,
          transparent 50px
        );
      background-size: 30px 30px, 90px 90px;
      background-position: 0 0;
    }
    .box4 {
      background: repeating-conic-gradient(
        rgb(255, 255, 255),
        rgb(109, 241, 76),
        rgb(255, 255, 255) 0.8deg
      );
    }
    .box5 {
      background: linear-gradient(#78c9db 70%, #0acf00 0%);
      background-size: 100% 20px;
    }
    .box6 {
      background: linear-gradient(45deg, #78c9db 50%, #0acf00 50%);
      background-size: 30px 30px;
    }
    .box7 {
      background: linear-gradient(-45deg, #0acf00 50%, #78c9db 50%);
      background-size: 30px 100%;
    }
    .box8 {
      background: linear-gradient(
        -45deg,
        #0acf00 25%,
        #78c9db 0,
        #78c9db 50%,
        #0acf00 0,
        #0acf00 75%,
        #78c9db 0
      );
      background-size: 30px 30px;
    }
    .box9 {
      background: #fff
        repeating-linear-gradient(
          30deg,
          rgba(0, 0, 0, 0.5),
          rgba(0, 0, 0, 0.5) 15px,
          transparent 0,
          transparent 30px
        );
    }
    .box10 {
      background: #fff;
      background: linear-gradient(
          90deg,
          rgba(100, 0, 0, 0.5) 50%,
          transparent 0
        ),
        linear-gradient(rgba(100, 0, 0, 0.5) 50%, transparent 0);
      background-size: 30px 30px;
    }
    .box11 {
      background: #a95f44;
      background-image: radial-gradient(#fff 30%, transparent 0),
        radial-gradient(#fff 30%, transparent 0);
      background-size: 20px 20px;
      background-position: 0 0, 10px 10px;
      /* 必须是background-size尺寸的1/2 */
    }
    .box12 {
      background: #fff;
      background-image: linear-gradient(
          45deg,
          #a95f44 26%,
          transparent 0,
          transparent 75%,
          #a95f44 0
        ),
        linear-gradient(
          45deg,
          #a95f44 26%,
          transparent 0,
          transparent 75%,
          #a95f44 0
        );
      background-size: 30px 30px;
      background-position: 0 0, 15px 15px;
    }
    .box13 {
      background-image: linear-gradient(
          90deg,
          rgba(50, 0, 0, 0.05) 3%,
          rgba(0, 0, 0, 0) 3%
        ),
        linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%);
      background-size: 20px 20px;
      background-position: center center;
    }
    .box14 {
      background-image: repeating-radial-gradient(
        ellipse at center center,
        rgb(75, 154, 242),
        rgb(64, 135, 228),
        rgb(54, 117, 214),
        rgb(43, 98, 200),
        rgb(33, 79, 185),
        rgb(22, 60, 171),
        rgb(12, 42, 157),
        rgb(1, 23, 143) 0.01px
      );
    }
    .box15 {
      background-color: #f90;
      background-image: -webkit-gradient(
        linear,
        0 0,
        100% 0,
        color-stop(0.5, rgba(255, 255, 255, 0.2)),
        color-stop(0.5, transparent),
        to(transparent)
      );
      background-image: -moz-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 50%,
        transparent
      );
      background-image: -o-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 50%,
        transparent
      );
      background-image: linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 50%,
        transparent
      );
      background-size: 50px 50px;
      -moz-box-shadow: 1px 1px 8px gray;
      -webkit-box-shadow: 1px 1px 8px gray;
      box-shadow: 1px 1px 8px gray;
    }
    .box16 {
      background-color: white;
      background-image: -webkit-gradient(
          linear,
          0 0,
          0 100%,
          color-stop(0.5, transparent),
          color-stop(0.5, rgba(200, 0, 0, 0.5)),
          to(rgba(200, 0, 0, 0.5))
        ),
        -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, transparent), color-stop(0.5, rgba(200, 0, 0, 0.5)), to(rgba(200, 0, 0, 0.5)));
      background-image: -moz-linear-gradient(
          transparent 50%,
          rgba(200, 0, 0, 0.5) 50%,
          rgba(200, 0, 0, 0.5)
        ),
        -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, 0.5) 50%, rgba(200, 0, 0, 0.5));
      background-image: -o-linear-gradient(
          transparent 50%,
          rgba(200, 0, 0, 0.5) 50%,
          rgba(200, 0, 0, 0.5)
        ),
        -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, 0.5) 50%, rgba(200, 0, 0, 0.5));
      background-image: linear-gradient(
          transparent 50%,
          rgba(200, 0, 0, 0.5) 50%,
          rgba(200, 0, 0, 0.5)
        ),
        linear-gradient(
          0deg,
          transparent 50%,
          rgba(200, 0, 0, 0.5) 50%,
          rgba(200, 0, 0, 0.5)
        );
      background-size: 50px 50px;
      -moz-box-shadow: 1px 1px 8px gray;
      -webkit-box-shadow: 1px 1px 8px gray;
      box-shadow: 1px 1px 8px gray;
    }
    .box17 {
      background-image: -webkit-gradient(
          linear,
          0 0,
          100% 100%,
          color-stop(0.25, #555),
          color-stop(0.25, transparent),
          to(transparent)
        ),
        -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, #555), color-stop(0.25, transparent), to(transparent)),
        -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.75, transparent), color-stop(0.75, #555)),
        -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.75, transparent), color-stop(0.75, #555));
      background-image: -moz-linear-gradient(
          45deg,
          #555 25%,
          transparent 25%,
          transparent
        ),
        -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
        -moz-linear-gradient(45deg, transparent 75%, #555 75%),
        -moz-linear-gradient(-45deg, transparent 75%, #555 75%);
      background-image: -o-linear-gradient(
          45deg,
          #555 25%,
          transparent 25%,
          transparent
        ),
        -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
        -o-linear-gradient(45deg, transparent 75%, #555 75%),
        -o-linear-gradient(-45deg, transparent 75%, #555 75%);
      background-image: linear-gradient(
          45deg,
          #555 25%,
          transparent 25%,
          transparent
        ),
        linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
        linear-gradient(45deg, transparent 75%, #555 75%),
        linear-gradient(-45deg, transparent 75%, #555 75%);
      background-size: 50px 50px;
      -moz-box-shadow: 1px 1px 8px gray;
      -webkit-box-shadow: 1px 1px 8px gray;
      box-shadow: 1px 1px 8px gray;
    }
    .box18 {
      background-color: #ddeeff;
      background-image: radial-gradient(
          closest-side,
          transparent 98%,
          rgba(0, 0, 0, 0.3) 99%
        ),
        radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%);
      background-position: 0 0, 40px 40px;
      background-size: 80px 80px;
    }
  </style>
  <body>
    <section class="flex">
      <div class="box box1"></div>
      <div class="box box2"></div>
      <div class="box box3"></div>
      <div class="box box4"></div>
      <div class="box box5"></div>
      <div class="box box6"></div>
      <div class="box box7"></div>
      <div class="box box8"></div>
      <div class="box box9"></div>
      <div class="box box10"></div>
      <div class="box box11"></div>
      <div class="box box12"></div>
      <div class="box box13"></div>
      <div class="box box14"></div>
      <div class="box box15"></div>
      <div class="box box16"></div>
      <div class="box box17"></div>
      <div class="box box18"></div>
    </section>
  </body>
</html>
